<template>
  <div class="activity-card">
    <div class="card-container">
      <v-row>
        <v-col v-for="(item, index) in dataList"
               :key="index"
               cols="12" md="4">
          <div :style="`background-image: url(${bgImgs[index]});`"
               class="card-item pb-7"
               style="background-size: cover"
          >
            <div class="card-img">
              <img
                  :src="item.img"
              />
              <span>{{ item.price }}T币</span>
            </div>
            <div class="card-content">
              <p>{{ item.title }}</p>
              <!-- <h4>登录并参与</h4> -->
              <h4>{{ item.desc }}</h4>
              <div class="countdown">
                <div class="time">
                  <div v-if="item.day > 0" class="te">
                    <div class="ti">{{ item.day }}</div>
                    <div class="unit">DAYS</div>
                  </div>
                  <p v-if="item.day > 0 && item.hour > 0">:</p>
                  <div v-if="item.hour" class="te">
                    <div class="ti">{{ item.hour }}</div>
                    <div class="unit">HOURS</div>
                  </div>
                  <p v-if="item.hour > 0 && item.minute">:</p>
                  <div v-if="item.minute > 0" class="te">
                    <div class="ti">{{ item.minute }}</div>
                    <div class="unit">MINUTES</div>
                  </div>
                  <p v-if="item.minute > 0 && item.second > 0">:</p>
                  <div v-if="item.second > 0" class="te">
                    <div class="ti">{{ item.second }}</div>
                    <div class="unit">SECONDS</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </v-col>
      </v-row>

    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, onUnmounted, reactive, toRefs} from 'vue'
import {countDown} from '@/utils'

import bgZise from '@/static/img/layout/bg_zise.png';
import bgLanse from '@/static/img/layout/bg_lanse.png';
import bgChengse from '@/static/img/layout/bg_chengse.png';

const bgImgs = [bgZise, bgLanse, bgChengse]
export default defineComponent({
  name: 'ActivityCard',
  props: {
    list: {
      type: Array,
      default: [],
      require: true
    }
  },
  setup(props: { list: any[] }) {
    const dataList = props.list.map(v => {
      return {
        ...v,
        ...countDown(v.time)
      }
    })

    const state = reactive({
      dataList
    })

    let timer: number | undefined

    onMounted(() => {
      timer = setInterval(function () {
        state.dataList = state.dataList.map(v => Object.assign(v, countDown(v.time)))
      }, 1000)
    })

    onUnmounted(() => {
      clearInterval(timer)
    })


    return {
      ...toRefs(state),
      bgImgs
    }
  }
})
</script>

<style lang="scss" scoped>
.activity-card {
  .card-container {
    .card-item {
      cursor: pointer;
      background-size: cover;
      border-radius: 15px;
      height: 100%;
      display: flex;

      .card-img {
        display: grid;
        justify-items: center;
        position: relative;
        height: 100%;
        width: 35%;
        text-align: center;

        img {
          width: 70%;
          margin-top: 1rem;
        }

        span {
          position: absolute;
          bottom: 15px;
          display: block;
          color: #fff;
          font-weight: 800;
        }
      }

      .card-content {
        padding-top: 1rem;
        width: 65%;

        p {
          font-weight: 900;
          margin: 0;
          font-size: 1.4rem;
        }

        h4 {
          color: rgb(228, 228, 228);
          margin-top: 0;
          margin-bottom: .4rem;
        }

        .countdown {


          .time {
            font-size: 24px;
            display: flex;
            justify-content: flex-end;
            margin-right: 20px;

            p {
              font-size: 24px;
              color: #9b9b9b;
              margin: 0px 10px;
            }

            .ti {
              display: inline-block;
              color: #fff;
              padding: 3px 15px;
              background-color: hsla(0, 0%, 89%, 0.2);
              margin-bottom: 6px;
            }

            .unit {
              display: block;
              font-size: 12px;
              text-align: center;
              color: #e3e3e3;
            }
          }
        }
      }
    }
  }
}
</style>
